import React from 'react'
import PropTypes from 'prop-types'
import { Menu, Dropdown, Icon, Layout, Avatar, Badge } from 'antd'
// import { useRequest } from 'ahooks'
// import { requestWrapper } from '@/utils/request'
// import newAPI from '@/services/new'
const { Header } = Layout

const AppHeader = props => {
    let { menuClick, avatar, menuToggle, loginOut, toSet } = props

    // const { data, run: getWeather } = useRequest(
    //     () =>
    //         requestWrapper(newAPI.weather.bind(null, ), {
    //             // autoSuccess: true,
    //         }),
    //     {
    //         onSuccess: () => {
    //             console.log(data)
    //         }
    //     }
    // )

    const menu = (
        <Menu>
            <Menu.ItemGroup title='用户设置'>
                <Menu.Divider />
                <Menu.Item>
                    <Icon type='edit' onClick={toSet} />
                    个人设置
                </Menu.Item>
                <Menu.Item>
                    <Icon type='setting' theme='filled' />
                    系统设置
                </Menu.Item>
            </Menu.ItemGroup>
            <Menu.Divider />
            <Menu.Item onClick={loginOut}>
                <span>
                    <Icon type='logout' /> 退出登录
                </span>
            </Menu.Item>
        </Menu>
    )
    return (
        <Header className='header'>
            <div className='left'>
                <Icon
                    style={{ fontSize: '2rem' }}
                    onClick={menuClick}
                    type={menuToggle ? 'menu-unfold' : 'menu-fold'}
                />
            </div>
            <div className='right'>
                <div className='mr15'>
                    <a rel='noopener noreferrer' href='#' target='_blank'>
                        <Icon type='cloud' style={{ color: '#000' }} />
                    </a>
                </div>
                <div className='mr15'>
                    <Badge dot={true} offset={[-2, 0]}>
                        <a href='#' style={{ color: '#000' }}>
                            <Icon type='bell' />
                        </a>
                    </Badge>
                </div>
                <div>
                    <Dropdown overlay={menu} overlayStyle={{ width: '20rem' }}>
                        <div className='ant-dropdown-link'>
                            <img
                                width={16}
                                icon='user'
                                src='assets/option.png'
                                alt='avatar'
                                style={{ cursor: 'pointer' }}
                            />
                        </div>
                    </Dropdown>
                </div>
            </div>
        </Header>
    )
}

AppHeader.propTypes = {
    menuClick: PropTypes.func,
    avatar: PropTypes.string,
    menuToggle: PropTypes.bool,
    loginOut: PropTypes.func
}

export default AppHeader
